Histogram = Class.create(Configurable, {
    histogram_width_ : 0,
    max_height_ : 0,
    arr_heights_: new Array,
    arr_widths_: new Array,
    sum_height_ : 0,
    cnt_ : 0,
    initialize: function(options) 
    {
        this.setOptions(options);
        //this.canvas_width_ = Math.floor($('canvas').up().getStyle('width').sub('px', ''));
        $$('.'+ this.options.height_class).each(function(element){
            this.arr_heights_[this.cnt_++] = parseFloat(element.innerHTML);
            this.sum_height_ += parseFloat(element.innerHTML);
            if(parseFloat(element.innerHTML) > this.max_height_)
                this.max_height_ = parseFloat(element.innerHTML);
        }.bind(this));
        this.histogram_width_ = $(this.options.raphael_histogram_id).getWidth();
        var ratio = (this.max_height_/this.sum_height_*(this.options.histogram_height-this.options.padding-1))/(this.options.histogram_height-this.options.padding-1);
        this.cnt_ = 0;
        $$('.'+ this.options.width_class).each(function(element){
            this.arr_widths_[this.cnt_++] = parseFloat(element.innerHTML);
        }.bind(this));
        if(this.arr_heights_.length != this.arr_widths_.length)
            return false;
        raphael = Raphael(this.options.raphael_histogram_id, this.histogram_width_, this.options.histogram_height);
        var leftborder = raphael.path("M"+this.options.padding+" 0L"+this.options.padding+" "+ this.options.histogram_height);
        var bottomborder = raphael.path("M"+this.options.padding+" "+this.options.histogram_height+" L"+this.histogram_width_+" "+this.options.histogram_height);
        var x = 1 + this.options.padding;  
        var min_dim_width_factor = this.options.min_dim*this.arr_heights_.length;
        for(cnt=0; cnt < this.arr_heights_.length; ++cnt)
        {
            width = Math.floor((this.histogram_width_-1-this.options.padding) * this.arr_widths_[cnt]);
            //width = Math.floor((this.histogram_width_-1-min_dim_width_factor) * this.arr_widths_[cnt]);
            //width = width < this.options.min_dim ? this.options.min_dim : width;
            height = Math.floor(((this.options.histogram_height-this.options.padding-1-this.options.min_dim) * this.arr_heights_[cnt]/this.sum_height_)/ratio);
            //height = height < this.options.min_dim ? this.options.min_dim : height;
            var rect = raphael.rect(x, this.options.histogram_height-height, width, height);
            if(cnt % 2 == 0)
            {
                rect.attr("fill", this.options.color_odd);
            }
            else
            {
                rect.attr("fill", this.options.color_even);
            }
            rect.attr({"stroke": "#000", "href" : "#"+this.options.label_id+"_"+cnt});
            arr_options = [this.options.color_odd, this.options.color_even, this.options.color_hover,this.options.label_id];
            rect.hover(function() {
                this.flag = raphael.g.popup(this.getBBox().x+Math.floor(this.getBBox().width/2), this.getBBox().y, ($(arr_options[3]).innerHTML + "\n" +$(this.attr("href").gsub("#", "")).firstDescendant().innerHTML.gsub("&lt;", "<").gsub("&gt;", ">") || "0")).insertBefore(this);
                this.attr({"fill": arr_options[2]});
            }, function() {
                this.flag.animate({opacity: 0}, 100, function () {this.remove();});
                this.attr({"fill": arr_options[this.attr("href").gsub("#"+arr_options[3]+"_", "")%2]});
            });
            x += width;    
        }
    }
});

Histogram.DEFAULT_OPTIONS = {
    raphael_histogram_id: 'raphael_histogram',
    width_class: 'width',
    height_class: 'height',
    histogram_height: 450,
    padding: 50,
    min_dim: 10,
    label_id : 'th_class',
    label_class : 'th_class',
    quantity_id: 'th_quantity',
    quantity_class: 'th_quantity',
    color_even: '#f1e119',
    color_odd: '#fee973',
    color_hover: '#0c9b6b'
};

new Histogram();
